import React, { useState, useEffect } from 'react';
import { Table, Button, Modal, Form, Input, message, Space, Popconfirm } from 'antd';
import { PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons';
import './FriendLinkManagement.css';

const FriendLinkManagement = () => {
  const [friendLinks, setFriendLinks] = useState([]);
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [editingLink, setEditingLink] = useState(null);
  const [form] = Form.useForm();

  // 模拟数据加载
  useEffect(() => {
    // 这里应该是从API获取数据
    const mockData = [
      {
        id: 1,
        name: '百度',
        url: 'https://www.baidu.com',
        description: '中国最大的搜索引擎'
      },
      {
        id: 2,
        name: '谷歌',
        url: 'https://www.google.com',
        description: '全球最大的搜索引擎'
      }
    ];
    setFriendLinks(mockData);
  }, []);

  const columns = [
    {
      title: '名称',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '链接',
      dataIndex: 'url',
      key: 'url',
      render: (text) => <a href={text} target="_blank" rel="noopener noreferrer">{text}</a>,
    },
    {
      title: '描述',
      dataIndex: 'description',
      key: 'description',
    },
    {
      title: '操作',
      key: 'action',
      render: (_, record) => (
        <Space size="middle">
          <Button 
            type="primary" 
            icon={<EditOutlined />} 
            size="small"
            onClick={() => handleEdit(record)}
          >
            编辑
          </Button>
          <Popconfirm
            title="确定要删除这个友情链接吗？"
            onConfirm={() => handleDelete(record.id)}
            okText="是"
            cancelText="否"
          >
            <Button 
              type="danger" 
              icon={<DeleteOutlined />} 
              size="small"
            >
              删除
            </Button>
          </Popconfirm>
        </Space>
      ),
    },
  ];

  const handleAdd = () => {
    setEditingLink(null);
    form.resetFields();
    setIsModalVisible(true);
  };

  const handleEdit = (record) => {
    setEditingLink(record);
    form.setFieldsValue(record);
    setIsModalVisible(true);
  };

  const handleDelete = (id) => {
    // 这里应该是调用API删除
    setFriendLinks(friendLinks.filter(link => link.id !== id));
    message.success('删除成功');
  };

  const handleOk = () => {
    form.validateFields().then(values => {
      if (editingLink) {
        // 编辑现有链接
        const updatedLinks = friendLinks.map(link => 
          link.id === editingLink.id ? { ...values, id: editingLink.id } : link
        );
        setFriendLinks(updatedLinks);
        message.success('更新成功');
      } else {
        // 添加新链接
        const newLink = {
          ...values,
          id: Date.now() // 临时ID
        };
        setFriendLinks([...friendLinks, newLink]);
        message.success('添加成功');
      }
      setIsModalVisible(false);
      form.resetFields();
    });
  };

  const handleCancel = () => {
    setIsModalVisible(false);
    form.resetFields();
  };

  return (
    <div className="friendlink-management">
      <div className="friendlink-header">
        <Button
          type="primary"
          icon={<PlusOutlined />}
          onClick={handleAdd}
        >
          添加友情链接
        </Button>
      </div>

      <Table
        columns={columns}
        dataSource={friendLinks}
        rowKey="id"
        pagination={false}
        className="friendlink-table"
      />

      <Modal
        title={editingLink ? '编辑友情链接' : '添加友情链接'}
        visible={isModalVisible}
        onOk={handleOk}
        onCancel={handleCancel}
        okText="确定"
        cancelText="取消"
      >
        <Form
          form={form}
          layout="vertical"
          className="friendlink-form"
        >
          <Form.Item
            name="name"
            label="链接名称"
            rules={[{ required: true, message: '请输入链接名称' }]}
          >
            <Input placeholder="请输入链接名称" />
          </Form.Item>
          <Form.Item
            name="url"
            label="链接地址"
            rules={[
              { required: true, message: '请输入链接地址' },
              { type: 'url', message: '请输入有效的URL地址' }
            ]}
          >
            <Input placeholder="请输入链接地址" />
          </Form.Item>
          <Form.Item
            name="description"
            label="链接描述"
          >
            <Input.TextArea placeholder="请输入链接描述" />
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
};

export default FriendLinkManagement;